import React, { Component } from 'react';
import { Select, Search, Grid } from '@alifd/next';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';
import service from '../../../../utils/service';
import api from '../../../../utils/api';

const { Row, Col } = Grid;

export default class chooseHead extends Component {
  static displayName = '筛选条件';

  constructor(props) {
    super(props);
    this.state = {
      value: {},
      placeArr: [],
    };
  }
  // 获取地区参数
  getPlaceArr = () => {
    service({
      method: 'get',
      url: api.SuperPlace,
    })
      .then((res) => {
        if (res.data.code === 200) {
          const OplaceArr = [];
          res.data.list.forEach((item) => {
            OplaceArr.push({ label: item.place, value: item.id, key: item.id });
          });
          OplaceArr.sort((item1, item2) => {
            return item1.label.localeCompare(item2.label, 'cn');
          });
          this.setState({ placeArr: OplaceArr });
        }
      });
  };
  componentDidMount() {
    this.getPlaceArr();
  }
  formChange = (value) => {
    this.props.onChange(value);
  };
  toSearch = (value) => {
    this.props.onSearch(value);
  }

  render() {
    return (
      <IceFormBinderWrapper
        value={this.state.value}
        onChange={this.formChange}
        ref="form"
      >
        <Row wrap gutter="4">
          <Col span="5" className="FormCol">
            <div style={styles.formItem}>
              <span style={styles.formLabel}>地区</span>
              <IceFormBinder name="place">
                <Select placeholder="请选择供应商地区" style={styles.Select} dataSource={this.state.placeArr} size="large" autoWidth hasClear />
              </IceFormBinder>
              <div style={styles.formError}>
                <IceFormError name="place" />
              </div>
            </div>
          </Col>
          <Col span="6" className="FormCol">
            <Search style={styles.Search}
              type="normal"
              placeholder="请输入供应商ID或供应商名称"
              size="medium"
              onSearch={this.toSearch}
            />
          </Col>
        </Row>
      </IceFormBinderWrapper>
    );
  }
}

const styles = {
  alignRight: {
    textAlign: 'right',
  },
  container: {
    padding: '0',
  },
  alignLeft: {
    float: 'left',
  },
  Select: {
    float: 'right',
    width: 'calc(100% - 100px)',
    height: '38px',
    marginRight: '10px',
  },
  Search: {
    display: 'flex',
    alignItems: 'center',
    margin: '10px 0',
    width: '100%',
    paddingLeft: '1rem',
  },
  formLabel: {
    // minWidth: '80px',
    textAlign: 'right',
    paddingRight: '20px',
    fontSize: '14px',
  },
  formItem: {
    display: 'flex',
    alignItems: 'center',
    width: '100%',
    margin: '10px 0',
  },
};
